<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <Form @search="search" />

      <!-- <Operation class="operation-container" /> -->

      <Table ref="tableRef" :table-args="tableArgs" />
    </a-card>
  </page-header-wrapper>
</template>

<script>
import Form from './Form.vue'
import Operation from './Operation.vue'
import Table from './Table.vue'

export default {
  data () {
    return {
      // table search 参数
      tableArgs: {},
    }
  },

  computed: {
    tableRef () {
      return this.$refs.tableRef
    },
  },

  components: {
    Form,
    Operation,
    Table,
  },

  methods: {
    refreshTableData () {
      console.log(this.tableRef)
        this.$nextTick(async () => {
        this.tableRef.updatePaginationParams({ page: 1 })

        await this.tableRef.tableHooksRequest()
      })
    },

    search (data) {
      this.tableArgs = data

      this.refreshTableData()
    },
  },
}
</script>

<style lang="scss" scoped>
.operation-container {
  margin: $margin-sm 0;
}
</style>
